<template>
  <div class="ranking">
    <div class="ranking-title">
      <button class="ranking-title__button" @click="start">开始答题</button>
    </div>
    <div class="ranking-body">
      <div class="ranking-body__mine">
        <span class="ranking-body__title">我的积分</span>
        <ranking-card :myScore="myScore"></ranking-card>
      </div>
      <div class="ranking-body__mine">
        <span class="ranking-body__title">积分排行榜</span>
        <ranking-card
          v-for="item in scores"
          :key="item.uid"
          :score="item"
        ></ranking-card>
      </div>
    </div>
  </div>
</template>

<script>
import RankingCard from "@/components/ranking/RankingCard.vue";
import rankingApi from "@/api/ranking";
export default {
  components: {
    RankingCard,
  },
  data() {
    return {
      scores: [],
      myScore: {},
    };
  },
  created() {
    this.getList();
    this.getScore();
  },
  methods: {
    //   开始游戏
    start() {
      this.$router.push("/question");
    },
    //   获取排行榜
    getList() {
      let _this = this;
      rankingApi.getList().then((res) => {
        _this.scores = res.data.scores;
        // console.log(_this.scores);
      });
    },
    //   获取我的积分
    getScore() {
      let _this = this;
      rankingApi.getScore().then((res) => {
        console.log(res.data);
        _this.myScore = res.data._this;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ranking {
  display: flex;
  flex-direction: column;

  .ranking-title {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .ranking-title__button {
      border: 1px solid #47aabc;
      margin-top: 30px;
      padding: 40px 20px;
      border-radius: 100px;
      font-size: 15px;
      background-color: transparent;
    }
  }
  .ranking-body {
    position: relative;
    border-radius: 10px 10px 0 0;
    left: calc((100% - 320px) / 2);
    width: 320px;
    margin-top: 40px;
    background-color: #e8f9f7;

    .ranking-body__mine {
      font-size: 15px;
      .ranking-body__title {
        padding: 10px;
        line-height: 2.5;
        font-weight: 800;
      }
    }
  }
}
</style>